<template>
    <!--下面左侧菜单-->
    <div style="display: flex; min-height: 100vh; background-color: #525a67;" >
        <div style="width: 15%;">
            <div style=" display: flex; align-items: center; ">
                <img src="@/assets/picture/养老金.png" alt="" style="width: 40px;">
                <span style="font-size: 20px; color: #fff;">后台管理系统</span>
            </div>
            <el-menu class="menu" router :default-active="activeIndex.toString()" style="border: 0cap; background-color: #545c64;" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="/admin/backstagehome">
                    <el-icon>
                        <House />
                    </el-icon>首页
                </el-menu-item>
                <el-menu-item index="/admin/adminmanager">
                    <el-icon class="admin-icon"></el-icon>
                    管理员信息</el-menu-item>
                <el-menu-item index="/admin/enterpriseManage">
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    企业管理</el-menu-item>
                <el-menu-item index="/admin/webmanagement">
                    <el-icon>
                        <Monitor />
                    </el-icon>
                    网站管理</el-menu-item>
                <el-menu-item index="/admin/manageendowment">
                    <el-icon>
                        <List />
                    </el-icon>
                    缴纳记录
                </el-menu-item>

            </el-menu>
        </div>
        <!--下面右侧主体-->
        <div style="flex: 1;width: 0; background-color: #f5f7ff;">
            <!--头部-->
            <div style="height: 5vh;  display: flex; align-items: center;background-color: white;">
                <div style="flex:1"></div>
                <div v-if="data.admin" style=" width:fit-content; align-items: center; display: flex; margin-right: 2%;">
                    <span style=" margin-left: 5px; margin-right: 10px;color: #5e5e5e;">{{ "管理员" + data.admin.adminId }}</span>
                    <el-dropdown>
                        <img src="@/assets/picture/icon-admin.png" alt="" style="width: 40px; height: 40px;">
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <div style="padding: 20px; background-color: #f5f7ff;">
                <RouterView />
            </div>
            
        </div>
    </div>
</template>
<script setup>
import router from '@/router';
import { reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';


const data = reactive({
    admin: JSON.parse(localStorage.getItem('admin')),
})

const route = useRoute();
const activeIndex = ref(route.path); // 初始化为当前路由路径
watch(
  () => route.path,
  (newPath) => {
      activeIndex.value = newPath;
  }
);
const exit = () => {
    localStorage.removeItem('admin');
    data.admin = null;
    router.push('/login');//退出到登录界面
}

</script>
<style>
.el-menu .is-active {
    background-color: #e6ecf7;
}
.menu .el-menu-item.is-active {/*  选中颜色 */
  background: #5c6779 !important;
}
.menu .el-menu-item:hover {
  background: #5c6779 !important;
}
.admin-icon {
    width: 18px;
    height: 18px;
    background: url('@/assets/picture/iadmin.png') no-repeat center center;
    background-size: contain;
}

</style>